{% extends "base.html" %}
{% load myfilters %}


{% block title %}
<title>晋哆咕-详情页</title>
{% endblock %}


{% block css %}
<style>
    .container {
        margin-top: 100px;
    }
    .img-book {
    height: 300px;
    width: 200px;
    }
    .collect {
        width: 32px;
        height: 32px;
        position: absolute;
        margin-left: 20px;
    }
</style>
{% endblock %}


{% block body %}
    <div class="row">
        {% if request.user.is_authenticated and book|collect:request.user %}
        <div class="col-8">
            <img class="img-book" src="/media/{{ book.img }}" alt="">
            <span class="collect" style="background-image: url(/static/img/uncollect.png);"></span>
            <span><img src="/static/img/tag.png" alt=""></span>
            {% for tag in book.tag.all %}
                <span><a style="text-decoration:none;color: red;" href="/tag/{{ tag.id }}">{{ tag.title }}</a></span>
            {% endfor %}
        {% else %}
            <img class="img-book" src="/media/{{ book.img }}" alt="">
            <span class="collect" style="background-image: url(/static/img/collect.png);"></span>
            <span><img src="/static/img/tag.png" alt=""></span>
            {% for tag in book.tag.all %}
                <span><a style="text-decoration:none;color: red;font-size: 30px;" href="/tag/{{ tag.id }}">{{ tag.title }}</a></span>
            {% endfor %}
            {% endif %}
        {% csrf_token %}
        </div>
    </div>
{% endblock %}


{% block js %}
<script>
    $(function(){
        $(".collect").click(function(){
            if ('{{ request.user.id }}' == 'None') {
            location.href = "/user/login?next=/detail/{{ book.id }}"
            return redirect(to=location.href)
            };
            $.ajax({
                url: "/operate/change_collect/",
                method: "post",
                data:{
                    "csrfmiddlewaretoken": $("[type='hidden']").val(),
                    "book_id": "{{ book.id }}",
                },
                success: function(data){
                    console.log(data.data.state);
                    if (data.data.state) {
                        $(".collect").css({
                            "background-image": "url(/static/img/uncollect.png)"
                        })
                    }
                    else {
                        $(".collect").css({
                            "background-image": "url(/static/img/collect.png)"
                        })
                    }
                }
            });
        })
    })
</script>
{% endblock %}
